<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="/js/jquery/jquery-3.5.1.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/book/book.js"></script>
    <link rel="stylesheet" href="/css/bookList.css">
    <title>longmiyu</title>
</head>
<body >

<div class="layui-header" style="filter:alpha(opacity=50);background:#d8be5e40;width:100%;" >
<ul class="layui-nav  layui-layout-right " style="filter:alpha(opacity=50);background:#d8be5e00;" >
<!--    <li class="layui-nav-item layui-hide-xs">-->
<!--        <a href="javascript:theme()"  style="color: red;" >背景设置</a>-->
<!--    </li>-->
<!--    <li class="layui-nav-item layui-hide-xs">-->
<!--        <a href="/alert/book/bookRule" target="_blank" style="color: red;" >规则设置</a>-->
<!--    </li>-->

</ul>
</div>

<div class="page-style">
    <div class="layui-form-item" STYLE="padding-left: 25%;padding-top: 5%">
        <div class="layui-col-md6" >
            <input type="text" name="search" lay-verify="search" autocomplete="off" placeholder="搜索书名或作者" class="layui-input layui-col-md6">
        </div>
        <div class="layui-col-md6">
            <button class="layui-btn layui-btn-normal layui-btn-radius layui-col-md6 "  lay-filter="search" style="width: 70px;" >搜索</button>
        </div>
    </div>
    <div class="search_book_list"></div>

</div>

<script type="text/javascript"  th:inline="none">
    layui.use(['layer', 'form','jquery','table'], function(){
        var layer = layui.layer
            ,form = layui.form
            ,$= layui.$
            ,table=layui.table;

        //监听提交
        $('.layui-btn').click(function () {
          //  var rs = JSON.stringify(data.field)
            var inputVal = $('.layui-input').val()
            var data = JSON.stringify({"search":inputVal});
            debugger;
             $.ajax({
                 type:"post",
                 url:'/bookMagic/searchBook',
                 data:data,
                 dataType:"json",
                 async:false,
                 contentType : "application/json; charset=utf-8",
                 success: function(res){
                     $(".item").remove();
                     var rs = res.data;
                     if(rs.length>0){
                         for (var i=0;i<rs.length;i++) {
                             debugger;
                             var rsdate = rs[i];
                             var div="<div class='item'>"+
                                     "<div><div class='pic_item'><img src="+rsdate.ruleSearchCoverUrl+" onclick='test("+JSON.stringify(rsdate)+")'   onerror=\"javascript:this.src='/img/magic/nocover.jpg';this.onerror = null\" style='width:110px;height:150px;'></div></div>"+
                                      "<div class='result-game-item-detail'>" +
                                             "<h3 class='item-title'><a  onclick='test("+JSON.stringify(rsdate)+")' class='title-link'><span>"+rsdate.ruleSearchName+"</span><span></span></a></h3>" +
                                             "<p class='result-game-item-desc'>"+rsdate.ruleSearchIntroduce+"</p>"+
                                     "<div class='item-detail'>" +
                                         "<p class='result-game-item-info-tag'><span class='result-game-item-info-tag-title preBold'>来源：</span><span>"+rsdate.sysSourceName+"</span></p>" +
                                         "<p class='result-game-item-info-tag'><span class='result-game-item-info-tag-title preBold'>作者：</span><span>"+rsdate.ruleSearchAuthor+"</span></p>" +
                                         "<p class='result-game-item-info-tag'><span class='result-game-item-info-tag-title preBold'>类型：</span><span>"+rsdate.ruleSearchKind+"</span></p>" +
                                         "<p class='result-game-item-info-tag'><span class='result-game-item-info-tag-title preBold'>更新时间：</span><span>"+rsdate.ruleSearchLastChapterDate+"</span></p>" +
                                         "<p class='result-game-item-info-tag'><span class='result-game-item-info-tag-title preBold'>最新章节：</span><span><a onclick='chapterContextfowdard("+JSON.stringify(rsdate)+")'>"+rsdate.ruleSearchLastChapter+"</a></span></p>" +
                                        "</div>"+
                                     "</div>"+
                                 "</div>"
                             ;
                             $(".search_book_list").append(div);
                         }


                     }else{
                         div ="<p>未搜索到相关信息</p>"
                     }
                   //  $(".search_book_list").append(div)

                     // table.render({
                     //     elem:"#test",
                     //     data:res.data,
                     //      cols: [
                     //     [
                     //         {  field : 'ruleSearchName', title: '书名', width: 180, sort: true,templet: detailLink}
                     //         , {field : 'ruleSearchAuthor', title: '作者', width: 180}
                     //         , {field : 'ruleSearchKind', title: '类别', width: 177}
                     //         , {field : 'ruleSearchIntroduce', title: '简介', width: 180}
                     //         , {field : 'ruleSearchBookState', title: '连载状态', width: 180}
                     //         , {field : 'ruleSearchLastChapterUrl', title: '链接', width: 300  }
                     //         //, {field : 'bookLastChapter', title: '最新章节', width: 180,templet: addLink}
                     //         , {field : 'ruleSearchLastChapter', title: '最新章节', width: 180,templet: readLink}
                     //         , {field : 'sysSourceName', title: '图书来源', width: 180}
                     //     ] //设置表头
                     // ],
                     //     parseData: function(data) { //res 即为原始返回的数据
                     //         return {
                     //             "code": 0, //解析接口状态
                     //             "msg": "", //解析提示文本
                     //             "count": 100, //解析数据长度
                     //             "data": data //解析数据列表
                     //         }
                     //     }
                     //     ,limit:10
                     //     , limits: [10, 50, 100]
                     //     , page: true //开启分页
                     // });

                 }
             });
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(test)', function(obj){
            var data = obj.data;
            debugger;
            $.ajax({
                type:"post",
                url:'/forward/book/pageBook/magicBookList',
                data:JSON.stringify(data),
                dataType:"json",
                async:false,
                contentType : "application/json; charset=utf-8",
                success: function(res){
                }
            });
            //标注选中样式
            //obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });
        function readLink(d) {
            var addLink = d.ruleSearchName;
            if ('' == addLink || null == addLink || undefined == addLink) {
                return '';
            }
            if (addLink.length > 0) {
                return   '<a href="/fd/book/pageBook/magicBookList?bookCode='+d.ruleSearchName+'" class="layui-table-link" target="_blank">' + d.ruleSearchName + '</a>'
            }
        }

        function detailLink(d) {
            var addLink = d.ruleSearchName;
            if ('' == addLink || null == addLink || undefined == addLink) {
                return '';
            }
            if (addLink.length > 0) {
                return   '<a href="/fd/book/pageBook/magicBookList?bookCode='+d.ruleSearchNoteUrl+'" class="layui-table-link" target="_blank">' + d.ruleSearchName + '</a>'
                //   return '<a class="layui-table-link" href="javascript:void(0);" lay-event="link">' + d.hrefs + '</a>';
            }
        }

    });

function test(obj){
    obj.type="2";
    forward("/forward/book/pageBook/magicBookList",obj);
}
function chapterContextfowdard(obj){
    obj.bookRule=obj.bookRuleSource;//规则来源
    obj.chapterSource=obj.ruleSearchLastChapterUrl;//最新章节url
    obj.chapterName = obj.ruleSearchLastChapter;//最新章节名称
    obj.chapterContext="";//最新章节内容
    forward("/forward/book/pageBook/readMagicBook",obj);
}


</script>
</body>
</html>

